import type { RouteObject } from "react-router-dom";
import { createBrowserRouter, Link, Navigate } from "react-router-dom";
import { ProgressBar } from "@/components/progress-bar";

import { ROUTE_PATHS } from "@/constants/common";

const routes: RouteObject[] = [
  // 登陆
  {
    path: ROUTE_PATHS.login,
    lazy: async () => ({
      Component: (await import("@/pages/login")).default,
    }),
    HydrateFallback: ProgressBar,
  },
  {
    path: "/",
    lazy: async () => ({
      Component: (await import("@/layouts")).default,
    }),
    HydrateFallback: ProgressBar,
    children: [
      // 重定向到首页
      {
        index: true,
        element: <Navigate replace to={ROUTE_PATHS.landing} />,
      },
      {
        path: ROUTE_PATHS.landing,
        lazy: async () => ({
          Component: (await import("@/pages/landing")).default,
        }),
        HydrateFallback: ProgressBar,
      },
      // 用户管理
      {
        path: ROUTE_PATHS.userManagement,
        lazy: async () => ({
          Component: (await import("@/pages/user-management")).default,
        }),
        handle: {
          title: "用户管理",
          crumb: () => <Link to={ROUTE_PATHS.userManagement}>用户管理</Link>,
        },
        HydrateFallback: ProgressBar,
      },
      // 二级菜单
      {
        path: ROUTE_PATHS.nestMenu,
        lazy: async () => ({
          Component: (await import("@/pages/nest-menu")).default,
        }),
        handle: {
          title: "嵌套菜单",
          crumb: () => "嵌套菜单",
        },
        HydrateFallback: ProgressBar,
        children: [
          {
            path: ROUTE_PATHS.subMenu1,
            lazy: async () => ({
              Component: (await import("@/pages/nest-menu/sub-menu-1")).default,
            }),
            handle: {
              title: "二级菜单一",
              crumb: () => <Link to={ROUTE_PATHS.subMenu1}>二级菜单一</Link>,
            },
            HydrateFallback: ProgressBar,
          },
          {
            path: ROUTE_PATHS.subMenu2,
            lazy: async () => ({
              Component: (await import("@/pages/nest-menu/sub-menu-2")).default,
            }),
            handle: {
              title: "二级菜单二",
              crumb: () => <Link to={ROUTE_PATHS.subMenu2}>二级菜单二</Link>,
            },
            HydrateFallback: ProgressBar,
          },
        ],
      },
      // echarts demo
      {
        path: ROUTE_PATHS.echartsDemo,
        lazy: async () => ({
          Component: (await import("@/pages/echarts")).default,
        }),
        handle: {
          title: "图表示例",
          crumb: () => <Link to={ROUTE_PATHS.echartsDemo}>图表示例</Link>,
        },
        HydrateFallback: ProgressBar,
      },
    ],
  },
];

export const router = createBrowserRouter(routes, {
  basename: import.meta.env.VITE_APP_BASE_URL,
  future: {
    v7_relativeSplatPath: true,
    v7_fetcherPersist: true,
    v7_normalizeFormMethod: true,
    v7_partialHydration: true,
    v7_skipActionErrorRevalidation: true,
  },
});
